<template>
  <ul class="list">
    <li
      v-for="(item, index) in products.items"
      :key=index
    >
      <a hover-class="none" :href="'/pages/detail/main?id='+item.id">
        <div class="content">
          <img
            class="img"
            :src="item.image"
            mode="aspectFit"
          >
          <div class="title">{{item.product_name}}</div>
          <div class="buy">
            <span class="icon">￥</span>
            <span class="price">{{item.real_price}}</span>
            <span class="oldPrice">原价{{item.original_price}}</span>
          </div>
        </div>
      </a>
    </li>
  </ul>
</template>

<script>
import { request } from '@/utils'
export default {
  props: ['cateId', 'keyword'],
  data () {
    return {
      hasMore: false,
      products: []
    }
  },
  methods: {
    async getProducts () {
      var data = {
        page: 0,
        perPage: 8
      }
      var result
      if (this.cateId) {
        data.category_id = this.cateId
        result = await request('/v1/product', 'get', data)
      }
      if (this.keyword) {
        data.keyword = this.keyword
        result = await request('/v1/product/search', 'get', data)
      }
      this.products = result.data
      if (this.products._meta.currentPage < this.products._meta.pageCount) {
        this.hasMore = true
      }
    }
  },
  watch: {
    cateId () {
      this.getProducts()
    }
  },
  onShow () {
    console.log(this.keyword)
    this.getProducts()
  },
  async onReachBottom () {
    var meta = this.products._meta
    if (this.hasMore) {
      meta.currentPage += 1
      var data = {
        page: meta.currentPage,
        perPage: 4
      }
      if (this.cateId) {
        data.category_id = this.cateId
      }
      if (this.keyword) {
        data.keyword = this.keyword
      }
      var result = await request('/v1/product', 'get', data)
      this.products.items = this.products.items.concat(result.data.items)
      if (meta.currentPage < meta.pageCount) {
        this.hasMore = true
      } else {
        this.hasMore = false
      }
    }
  }
}
</script>

<style scoped lang="scss">
.list {
  display: flex;
  margin: 0 25rpx;
  justify-content: space-between;
  flex-wrap: wrap;
  li {
    .content {
      width: 330rpx;
      height: 455rpx;
      display: flex;
      flex-direction: column;
      font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
      justify-content: space-between;
      .img {
        width: 330rpx;
        height: 320rpx;
      }
      .title {
        font-size: 14px;
        width: 330rpx;
        height: 76rpx;
        margin-top: 5rpx;
        font-weight: 600;
        color: #343434;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
      }
      .buy {
        color: #b93a39;
        .icon {
          font-size: 12px;
        }
        .price {
          display: inline-block;
          margin: 0 5rpx;
        }
        .oldPrice {
          text-decoration: line-through;
          font-size: 10px;
          color: #6d6d6d;
        }
      }
    }
  }
}
</style>
